CSS Styles
bg-color [Background Color]
Background color settings are available for most items, titles, dividers, containers, and add-ons. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
opacity [Opacity]
Set to a decimal value between 0 and 1. This sets the opacity of the container.
bg-image [Background Image]
Specify a background image or CSS3 gradient. If manually applying a CSS3 gradient use the -moz prefix with the windows installable application, or use the appropriate prefix for the browser used to run the software.
Both a background image and CSS3 gradient cannot be applied at the same time, choose one or the other. Background image can be futher defined with the 'background-repeat' and 'background-position' settings.
Both a background image and CSS3 gradient cannot be applied at the same time, choose one or the other. Background image can be futher defined with the 'background-repeat' and 'background-position' settings.
bg-repeat [Background Repeat]
Set to repeat, repeat-x, repeat-y, or no-repeat, the default value is no-repeat.
Use the repeat option to tile an image, this option is best used for creating gradient type effects in the items or containers.
Use the repeat option to tile an image, this option is best used for creating gradient type effects in the items or containers.
bg-position [Background Position]
Use any combination of top, left, center, or a dimensional value. The first value defines the vertical position, while the second value determines the horizontal position. When using two values
separate them with a space.
A setting of center center will center your image in the middle of the container or item. The position setting is useful for attaching pure CSS bullets to parent items, you can set the bullet image to the right with center right.
A setting of center center will center your image in the middle of the container or item. The position setting is useful for attaching pure CSS bullets to parent items, you can set the bullet image to the right with center right.
border-color [Border Color]
Defines the color of all border edges. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
To specify individual edge colors separate the values with a space, the order is top, right, bottom, left. A setting of... { #f00 #000 #000 #000 } will produce a red top border with a black colored right, bottom, and left borders.
To specify individual edge colors separate the values with a space, the order is top, right, bottom, left. A setting of... { #f00 #000 #000 #000 } will produce a red top border with a black colored right, bottom, and left borders.
border-style [Border Style]
Specify the border style for all edges or individual edges. Valid styles are none, dotted, dashed, solid, double, groove, ridge, inset, outset. The default value is none.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { solid dashed solid dashed } will produce a solid top and bottom border with dashed left and right edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { solid dashed solid dashed } will produce a solid top and bottom border with dashed left and right edges.
border-width [Border Width]
Specify the border width for all edges or individual edges. Use any valid unit value, typically px units are
preferred by most developers for border edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
border-radius [Border Radius]
Specify the radius size for all corners of the container, this setting produces a rounding effect. Use any valid unit value, typically px units are
preferred by most developers for the border radius.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
This is a CSS3 feature and is compatible with all modern browsers including IE9+.
To specify individual edges separate the values with a space, the order is top, right, bottom, left. A setting of... { 5px 1px 1px 1px } will produce a 5 pixel tall top border with 1 pixel width right, bottom, and left edges.
This is a CSS3 feature and is compatible with all modern browsers including IE9+.
box-shadow [Box Shadow]
Specify the shadow effect for the item or container. The shadow may use CSS3 rgba colors and blur distances. Use 'px' or similar units to define the horizontal offsets, vertical offsets, and blur distances.
This is a CSS3 feature and is compatible with all modern browsers including IE9+.
This is a CSS3 feature and is compatible with all modern browsers including IE9+.
text-shadow [Text Shadow]
Specify the shadow effect for the text. The shadow may use CSS3 rgba colors and blur distances. Use 'px' or similar units to define the horizontal offsets, vertical offsets, and blur distances.
This is a CSS3 feature and is compatible with all modern browsers except IE9.
This is a CSS3 feature and is compatible with all modern browsers except IE9.
transform [Transform]
Transform the item or sub container. Rotate, skew, scale, and translate options are included. This is a CSS3 feature and is compatible with all modern browsers including IE9+.
Rotate: +/- values in degrees (360 = 1 full rotation)
Skew: +/- values in degrees, bends the element left or right.
Scale: .0 - 1.0 and 1 - N Size / zoom the element.
Translate: +/- position values (px, %) Move the position of the element.
Skew: +/- values in degrees, bends the element left or right.
Scale: .0 - 1.0 and 1 - N Size / zoom the element.
Translate: +/- position values (px, %) Move the position of the element.
color [Foreground Color]
The color style typically defines the text color for items and titles. With add-ons this
parameter may define the color of a bullet or interactive element. Use any valid CSS color setting or choose a color using the color picker by clicking the build button to the right of the input field.
cursor [Cursor]
Specify a valid CSS cursor name... pointer, hand, help, resize, etc. The cursor defines the mouse cursor to display.
font-family [Font Family]
Specify any valid system font family, if left blank the default browser font will be used which is typically Times New Roman.
While any valid font may be specified, we recommend choosing a web safe font from the list, click the build button to the right of the filed to see the available settings.
While any valid font may be specified, we recommend choosing a web safe font from the list, click the build button to the right of the filed to see the available settings.
font-size [Font Size]
Define the size of you text with any valid dimensional unit such as px, em, %, etc.
By default the templates use px units, however we recommend using em units instead. Em's will allow your menu to be truly scalable in IE, px values fix the font size in IE and adjust to the users font size setting in all other browsers. Em's adjust to the users settings in all browsers.
Em units define a font size relative to the font size set on the menus containing element. Because of this your em setting may look different in the visual interface than it does once published to your web page. The visual tool uses a default containing font size of 13px, a setting of 1em in the visual tool is equivelent to 13px.
By default the templates use px units, however we recommend using em units instead. Em's will allow your menu to be truly scalable in IE, px values fix the font size in IE and adjust to the users font size setting in all other browsers. Em's adjust to the users settings in all browsers.
Em units define a font size relative to the font size set on the menus containing element. Because of this your em setting may look different in the visual interface than it does once published to your web page. The visual tool uses a default containing font size of 13px, a setting of 1em in the visual tool is equivelent to 13px.
font-style [Font Style]
Set to normal, italic, oblique. The default value is normal.
font-weight [Font Weight]
Set to normal, bold, bolder, lighter. The default is normal.
height [Height]
Defines the height of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your
dimensions. Setting the height to auto is the same as leaving the field blank.
margin [Margin]
Margins comprise the space between the outside edge or border of an item and the next item or its container. Use any valid dimensional unit such as px, em, %, etc.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Margins are best used with main or sub menu items to create a space or gap between the items. In a vertical sub menu you can add a bottom or top margin to create blank space between the items.
Margins may also be used to specifically position a sub menu container, use negative or positive values to offset the default positioning. You can also automatically position a sub menu by simply dragging it to any desired location while in design view.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Margins are best used with main or sub menu items to create a space or gap between the items. In a vertical sub menu you can add a bottom or top margin to create blank space between the items.
Margins may also be used to specifically position a sub menu container, use negative or positive values to offset the default positioning. You can also automatically position a sub menu by simply dragging it to any desired location while in design view.
padding [Padding]
Padding is the space between an item or containers content and its edge, or border if applied. Use any valid dimensional unit such as px, em, %, etc.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Padding applied to the main or sub menu containers creates a buffer between your menu items and the edges of the container.
You can specify a single value which will apply to all edges or individual top, right, bottom, and left edges. When defining individual edges separate each value with a space... { 10px 5px 10px 5px }.
Padding applied to the main or sub menu containers creates a buffer between your menu items and the edges of the container.
text-align [Text Align]
Set to left, center, or right. The default value for this setting is typically inherited from the HTML page containing the menu.
font-variant [Font Variant]
Set to normal or small-caps. The small-caps option applies upper-case to all characters.
line-height [Line Height]
Set to any integer value greater than 0. The value determines the height of the text line in pixels. Most browsers will center the actual text within the height defined. Full cross browser testing for likeness should be performed with this setting.
text-decoration [Text Decoration]
Set to none, underline, overline, line-through, blink. The default value is none.
width [Width]
Defines the width of an item or container. Use any valid CSS unit such as px, em, %, etc. to define your dimensions. Setting the width to auto is the same as leaving the field blank.
If setting a width for a main or sub menu container, make sure the width is wide enough to accommodate your content.
If setting a width for a main or sub menu container, make sure the width is wide enough to accommodate your content.
position [Position]
Set the position to relative or absolute. Absolute positioning allows the top and left style settings to define the location of the menu relative to it's parent container. You may set the position absolute and include the menu inside a parent position absolute container, so long as the parent container with absolute positioning has a width of 100% applied.
Tip: Relative positioning (the default) allows the menu to position itself within the flow of your document as a block level element. The width of the main menu container will stretch to 100% of its parent container. Top and left style settings will position the menu relative to it's flow in the document.
Tip: Absolute positioning autmoatically forces the main menu container to the width of the main menu items. Top and left style settings will position the menu relative to it's positionable parent container or the body element.
Tip: Relative positioning (the default) allows the menu to position itself within the flow of your document as a block level element. The width of the main menu container will stretch to 100% of its parent container. Top and left style settings will position the menu relative to it's flow in the document.
Tip: Absolute positioning autmoatically forces the main menu container to the width of the main menu items. Top and left style settings will position the menu relative to it's positionable parent container or the body element.
top [Top]
Set the top position of the container relative to the top edge of it's parent. Use px or similar unit values.
left [Left]
Set the left position of the container relative to the left edge of it's parent. Use px or similar unit values.
z-index [Z Index]
Set the stacking order for the item or container. These values are inherited by default and may be overridden by the menu code under some circumstances.
The z-index is most useful when applied to menu items. Some templates apply a z-index value to the active state for the main items to force the subs underneath, this allows for a border / continuous area matching effect.
The z-index is most useful when applied to menu items. Some templates apply a z-index value to the active state for the main items to force the subs underneath, this allows for a border / continuous area matching effect.
Flow & Sizing
The flow & sizing features control the default sizing and positioning behaviour of the menu. Each setting is applied on the currently selected sub menu or main container. To apply settings to all your subs or specific sub levels, use the 'Globally Apply / Remove' feature.
flow horizontal [qm-horizontal-c]
Apply or remove the 'qm-horizontal-c' class name on the currently selected menu container. When applied the container items flow horizontally from left to right.
stretch fit items [qm-horizontal-stretch-items]
Apply or remove the 'qm-horizontal-stretch-items' class name on the currently selected menu container. When applied the container items (if set horizontal) will auto stretch to fit the current container width. The combined item widths must be less than the container width for them to stretch, items will not shrink to fit.
position flush left [qm-flush-left]
Apply or remove the 'qm-flush-left' class name on the currently selected menu container. When applied the container will position to the left edge of its parent container. This setting is only applied when the parent container has horizontally flowing items.
position flush top [qm-flush-top]
Apply or remove the 'qm-flush-top' class name on the currently selected menu container. When applied the container will position to the top edge of its parent container. This setting is only applied when the parent container has vertically flowing items.
position right to left [qm-rtl]
Apply or remove the 'qm-rtl' class name on the currently selected menu container. When applied containers will position to the left of the parent item instead of the default right positioing.
position above parent [qm-btt]
Apply or remove the 'qm-btt' class name on the currently selected menu container. When applied containers will position above the parent item instead of the default below the parent positioing.
match item width [qm-match-parent-item-width]
Apply or remove the 'qm-match-parent-item-width' class name on the currently selected menu container. When applied the container width will be sized to match its parent item width. Typically used on 1st level subs of a main menu with horizontal flow.
match all item widths [qm-match-parent-items-width]
Apply or remove the 'qm-match-parent-items-width' class name on the currently selected menu container. When applied the container width will be sized to match the total width of its parent containers items.
match all item widths [qm-match-parent-sub-height]
Apply or remove the 'qm-match-parent-sub-height' class name on the currently selected menu container. When applied the container height will be set to match the height of its parent container. The height will only be adjusted if the natural height of the container is less than its parent.
Add-On: Style Transitions
Style transitions allow for movie like production capabilities over the animation of an elements style attributes. Clips, tracks, and style start / end values may be combined and applied to sub containers and menu items. A full GUI interface for creating animations is provided in the bottom tab pane.
Use the properties box or left styles tree to access the animation code and apply other add-on settings.
Use the properties box or left styles tree to access the animation code and apply other add-on settings.
styleanim_enabled [Enabled]
Set to true or false. When true the styleanim add-on will be enabled and applied to your menu. Use this option to disable the menu animations while retaining your settings.
styleanim_items_main_apply [Main Items Apply]
Set to 'all', 'parent', or 'non-parent' - Defines which type of main menu items will show the style animation.
styleanim_items_main_quickstop [Main Items Quick Stop]
Set to true or false. Forces the animation to stop immediately instead of reversing direction when event changes warrant.
styleanim_items_main_show [Main Items Show Animation]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
styleanim_items_main_hide [Main Items Hide Animation]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
styleanim_subs_quickstop [Sub Menu Quick Stop]
Set to true or false. Forces the animation to stop immediately instead of reversing direction when event changes warrant.
styleanim_subs_show [Sub Menu Show Animations]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
styleanim_subs_hide [Sub Menu Hide Animations]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
styleanim_items_sub_apply [Sib Items Apply]
Set to 'all', 'parent', or 'non-parent' - Defines which type of sub menu items will show the style animation.
styleanim_items_sub_quickstop [Sub Items Quick Stop]
Set to true or false. Forces the animation to stop immediately instead of reversing direction when event changes warrant.
styleanim_items_sub_show [Sub Items Show Animation]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
styleanim_items_hide_show [Sub Items Hide Animation]
This is a multi dimensional array of JSON formatted data which defines the animation. Easily customize the animations with the transitions GUI in the bottom tab panel.
Add-On: Box Animation
The box animation zooms and shrinks a CSS styled box before and after a sub menu is displayed. A wide array of effects may be achieved with this add-on by customizing the styles of the box and tweaking the position setting.
box_animation_frames [Frames]
This is the total number of animation frames to use, however if combined with an
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
box_accelerator [Accelerator]
You can add some snap to the animation effect with the accelerator setting. Usually a value in the range of .1 to 2.0 works well.
box_position [Position]
valid values are center, top, left, top-left. The position determines the starting point from where the box will grow and shrink back to.
Add-On: Fade Subs
The fade subs animation applies to sub menus. When displayed the sub menu will fade in and then fade out when hidden.
fade_in_frames [Fade In Frames]
This is the total number of animation frames to use during the fade in animation. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
fade_out_frames [Fade Out Frames]
This is the total number of animation frames to use during the fade out animation. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
Add-On: Bump Subs
The bump subs animation applies to sub menus. When displayed the sub menu will start at a
slightly offset position and slide to its final and correct location.
bump_animation_frames [Frames]
This is the total number of animation frames to use. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
bump_distance [Distance]
Defined using any integer value greater than 0. The distance determines how for the bump animation will travel.
bump_main_direction [Main Direction]
valid values are up, down, left, right. The default value is up. This determines the direction that the bump animation will travel for the 1st level sub menus which belong to main parent items.
bump_sub_direction [Sub Direction]
valid values are up, down, left, right. The default value is up. This determines the direction that the bump animation will travel for 2nd level and greater sub menus.
bump_auto_switch_main_left_right_directions [Auto Switch Direction]
Set to true or false. The default value is false. When true 1st level sub menus will automatically bump left or right. The direction is determined by which side of the item a previous sub menu was last visible. This feature works best with horizontal main menus which have little or no show delay set on the sub menu visibility.
Add-On: Slide Subs
This addon slides sub menus into position from customizable directions. A unique animation feature is included for dropping subs off screen when hidding sub menus.
slide_animation_frames [Frames]
This is the total number of animation frames to use, however if combined with an
accelerator the number may be lower than what you specify resulting in a quicker animation sequence.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
The lower the number the faster your animation will be, the higher the number the slower your animation will run.
slide_accelerator [Accelerator]
You can add some snap to the animation effect with the accelerator setting. Usually a value in the range of .1 to 2.0 works well.
slide_left_right [Main Right]
By default 1st level subs slide in from the top, setting this value to true will force 1st level subs to slide from the left. This works best with vertically oriented main menu items.
slide_left_right [Sub Right]
By default 2st level subs slide in from the top, setting this value to true will force 2nd level subs to slide from the left. This works best with vertically oriented sub menu items.
slide_offxy [Offset XY]
Define with an integer value. The offset applies to the left position of the sub for left to right animations and to the top position for top to bottom animations.
The offset does not affect the final location of the sub menu, rather the location from which the slide appears. The offset is useful for sub menus which appear on top of there parent containers. By offsetting the slide the animation can be made to appear as if its sliding in from under the parent container even though its final resting spot is over the container.
The offset does not affect the final location of the sub menu, rather the location from which the slide appears. The offset is useful for sub menus which appear on top of there parent containers. By offsetting the slide the animation can be made to appear as if its sliding in from under the parent container even though its final resting spot is over the container.
slide_drop_subs [Drop Subs]
Set to true or false. When set to true, the sub menu hide animation will drop down and off the screen or to a set position instead of reverse sliding up or left.
slide_drop_subs_height [Drop Height]
Set to any integer value greater than 0. This setting requires the drop subs setting to be true.
The height determines how far the sub menu will drop before disappearing.
The height determines how far the sub menu will drop before disappearing.
slide_drop_subs_disappear [Drop Hide]
Set to true or false, the default value is false. This setting requires the drop sub setting to be true and a drop height.
By default dropped subs gradually hide as if sliding behind another object. Setting this option to true will cause the sub to disappear without the added effect when it reaches the set drop height.
By default dropped subs gradually hide as if sliding behind another object. Setting this option to true will cause the sub to disappear without the added effect when it reaches the set drop height.
Add-On: Merge Subs
This effect create a duplicate clone of the sub menu to be displayed, sets the new sub and the original to a custom opacity level, then merges the two into one by sliding them into each other.
merge_frames [Frames]
This is the total number of animation frames to use. A lower number results in a faster animation while larger numbers produce smoother, yet slower animations.
merge_updown [Main Up]
Set to true or false. The default value is false. When true, the 1st level subs will merge from the top and bottom rather than from the left and right.
merge_sub_subs_updown [Subs Up]
Set to true or false. The default value is false. When true, all 2nd level and higher subs will merge from the top and bottom rather than from the left and right.
merge_opacity [Opacity]
Set to a decimal value between 0 and 1. This sets the opacity of the merging sub menus.
Add-On: Item Bullets (CSS Based / Imageless)
These item bullets are styled completely with CSS and are drawn by the NodeFire software on the fly when your menu loads without the need for images. A host of shapes, styling options, and hover plus active features are combined into this relatively lightweight add-on.
ibcss_apply_to [Apply To]
Set to parent, non-parent, all. The default value is all.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
ibcss_main_type [Main Type]
Click the build button to the right of this field to select the type of arrow to display for the main items.
ibcss_main_direction [Main Direction]
Set to down, right, up, left. These options apply to arrow type bullets only and determine the direction in which the main arrow will point.
ibcss_main_size [Main Size]
Set to any integer value greater than 0. This determines the size of the bullet for the main menu items.
ibcss_main_bg_color [Main Static Background Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet.
ibcss_main_bg_color_hover [Main Static Background Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet when the mouse is over the menu item.
ibcss_main_bg_color_active [Main Static Background Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_main_border_color [Main Static Border Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet.
ibcss_main_border_color_hover [Main Static Border Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet when the mouse is over the menu item.
ibcss_main_border_color_active [Main Static Border Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_main_position_x [Main Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibcss_main_position_y [Main Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibcss_main_align_x [Main align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibcss_main_align_x [Main align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
ibcss_sub_type [Sub Type]
Click the build button to the right of this field to select the type of arrow to display for the sub items.
ibcss_sub_direction [Sub Direction]
Set to down, right, up, left. These options apply to arrow type bullets only and determine the direction in which the sub arrow will point.
ibcss_sub_size [Sub Size]
Set to any integer value greater than 0. This determines the size of the bullet for the sub menu items.
ibcss_sub_bg_color [Sub Static Background Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet.
ibcss_sub_bg_color_hover [Sub Static Background Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet when the mouse is over the menu item.
ibcss_sub_bg_color_active [Sub Static Background Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the background color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_sub_border_color [Sub Static Border Color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet.
ibcss_sub_border_color_hover [Sub Static Border Hover color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet when the mouse is over the menu item.
ibcss_sub_border_color_active [Sub Static Border Active color]
Use any valid CSS color setting or pick your color using the build button / color swatch to the right of the field. This value sets the border or outline color for the bullet while the menu items child sub menu is visible. If the item does not contain a sub menu then only the hover color will be visible while the mouse is over the menu item.
ibcss_sub_position_x [Sub Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibcss_sub_position_y [Sub Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibcss_sub_align_x [Sub align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibcss_sub_align_x [Sub align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
Add-On: Vertical Scroller
The scroller addon creates a vertical scrolling effect from a standard menu structure. Main items can be paused with a customizable timer setting. Sub level content shows directly under the main items, indenting and formatting are simple using main items with associated subs containing content areas or standard items, title, etc.
scroll_step_size [Animation Step Size]
Set to any positive integer value. A value of 1 will produce a slower animation which moves one pixel at a time. A higher value will yield a faster animation effect.
scroll_delay [Animation Delay (milliseconds)]
Set to any positive integer. The setting is defined in milliseconds (1 second = 1000 milliseconds). A lower value will produce a faster animation speed while higher values will slow the effect down.
scroll_pause_time [Item Pause Time]
Set to any positive integer. The setting is measured in seconds and applies to all main items. The items will pause at the top of the scroll area for the defined duration of time.
scroll_start_top [Start Content at Top]
Set to true or false. When true the scroll content will start visible and paused at the top of the scroll area. When false the scroll area will initially be blank and the content will scroll into view from the bottom.
scroll_start_pause [Starting Pause Time]
Set to any positive integer. The setting is measured in seconds. When initially loaded and scroll_start_top is true, the scroller will pause for the defined duration before scrolling when initially loaded.
scroll_fade_steps [Fade Steps]
Set to any poitive integer. The fade effect is applied to the bottom and top of the scroll window. The effect creates a fade in and out transition as the scroll content enters and leaves the window. The higher the step count the larger the fade area will be. Note: A large step count may impede performance.
scroll_fade_step_height [Fade Step Height]
Set to any poitive integer. The fade effect is applied to the bottom and top of the scroll window.The effect creates a fade in and out transition as the scroll content enters and leaves the window. The setting combines with the 'scroll_fade_steps' setting to determine the height and resolution of the transition. Note: A large height setting may impede performance.
scroll_fade_color [Fade Color]
When left blank the fade color will automatically be set to the background color of the main container. The match color may be overrided by setting a color of your choice. Setting the color transparent or left to default match a transparent main container will disable the effect.
Add-On: Item Bullets (Image Based)
Image based item bullets use custom defined images to create static, however, and active images. Typically these bullets are applied to the parent items within a menu to indicate that a sub menu with additional links is available for a given menu item.
ibullets_apply_to [Apply To]
Set to parents, non-parents, all. The default value is all.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
Parents are items with child sub menus, use this setting to tell your users that certain items will display a sub menu with additional links.
ibullets_main_image [Main Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
ibullets_main_image_hover [Main Hover Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The hover image is visible while the mouse is over the menu item to which it belongs.
ibullets_main_image_active [Main Active Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The active image is displayed when the items sub menu is visible, if the item does not have a sub menu then only the hover image will be shown.
ibullets_main_image_width [Main Image Width]
Set to any integer greater than 0. This defines the width of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_main_image_height [Main Image Height]
Set to any integer greater than 0. This defines the height of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_main_position_x [Main Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibullets_main_position_y [Main Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibullets_main_align_x [Main align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibullets_main_align_x [Main align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
ibullets_sub_image [Sub Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
ibullets_sub_image_hover [Sub Hover Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The hover image is visible while the mouse is over the menu item to which it belongs.
ibullets_sub_image_active [Sub Active Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The active image is displayed when the items sub menu is visible, if the item does not have a sub menu then only the hover image will be shown.
ibullets_sub_image_width [Sub Image Width]
Set to any integer greater than 0. This defines the width of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_sub_image_height [Sub Image Height]
Set to any integer greater than 0. This defines the height of the images... static, hover, and active. Images should all be the same dimensions or they will be scaled and my not appear as intended.
ibullets_sub_position_x [Sub Offset X]
Set to any negative or positive integer value. The bullet will be horizontally offset from its default positioning.
ibullets_sub_position_y [Sub Offset Y]
Set to any negative or positive integer value. The bullet will be vertically offset from its default positioning.
ibullets_sub_align_x [Sub align X]
Set to left, center, right. The bullet will be positioned left, center, or right, within each menu item.
ibullets_sub_align_x [Sub align X]
Set to left, middle, right. The bullet will be positioned left, middle, or right, within each menu item.
Add-On: Follow Pointer (Image Based)
Follow pointer are custom images which follow the mouse as it moves over the main or sub menu containers. The pointer adds
additional interactivity and helps users pinpoint there location within the menu structure.
tabscss_type [Type]
Set to angled or rounded. Angled tabs cut diagonally across create a v effect. Rounded tabs arch download create an arch effect between items.
pointer_main_image [Main Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths.
The follow pointer image will appear when the mouse is over the main menu container.
The follow pointer image will appear when the mouse is over the main menu container.
pointer_main_image_width [Main Width]
Set to any ineger value greater than 0. This defines the width of the pointer image.
pointer_main_image_height [Main Height]
Set to any ineger value greater than 0. This defines the height of the pointer image.
pointer_main_align [Main Align]
set to top-or-left, bottom-or-right. Vertically oriented menus will use left or right placement, horizontally oriented menus will use top or bottom placement.
pointer_main_off_x [Main Offset X]
Set to any integer value. This will horizontally offset the pointer from its default position.
pointer_main_off_y [Main Offset X]
Set to any integer value. This will vertically offset the pointer from its default position.
pointer_sub_image [Sub Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths.
The follow pointer image will appear when the mouse is over the sub menu containers.
The follow pointer image will appear when the mouse is over the sub menu containers.
pointer_sub_image_width [Sub Width]
Set to any ineger value greater than 0. This defines the width of the pointer image.
pointer_sub_image_height [Sub Height]
Set to any ineger value greater than 0. This defines the height of the pointer image.
pointer_sub_align [Sub Align]
set to top-or-left, bottom-or-right. Vertically oriented menus will use left or right placement, horizontally oriented menus will use top or bottom placement.
pointer_sub_off_x [Sub Offset X]
Set to any integer value. This will horizontally offset the pointer from its default position.
pointer_sub_off_y [Sub Offset X]
Set to any integer value. This will vertically offset the pointer from its default position.
Add-On: Tree Style Menu
This addon converts any standard drop down menu into a tree style menu. A host of animation options and a self collapsing feature allow for a wide and unique array of design possibilites.
Like standard drop down menus, tree style menus benefit from all the same advanced CSS styling features and several of the add-ons. Use bullets, titles, dividers, striping, fade effects, and more.
Like standard drop down menus, tree style menus benefit from all the same advanced CSS styling features and several of the add-ons. Use bullets, titles, dividers, striping, fade effects, and more.
tree_auto_collapse [Auto Close Type]
Set to false, sync, chain, fixed-height. A setting other than false will force the previously open node to automatically retract when expanding a new node.
false - No auto collapse, nodes expand like a standard tree.
sync - Nodes collapse and expand in a syncronized fashion, this minimizes the maximum growth size of the tree.
chain - Nodes first expand then collapse in a chain effect.
fixed-height - Additional height is added to each first level sub to make all nodes and the tree a consistent height. 2nd level subs are stardard drop downs.
sync - Nodes collapse and expand in a syncronized fashion, this minimizes the maximum growth size of the tree.
chain - Nodes first expand then collapse in a chain effect.
fixed-height - Additional height is added to each first level sub to make all nodes and the tree a consistent height. 2nd level subs are stardard drop downs.
tree_mouseover [Mouse Over]
Set to true or false. When true the menu will expand and retract upon mouse over vs. click. If auto collapse is set false, the mouse over effect will be disabled regardless of this setting.
For added user control set a delay when using the mouse over feature, From the main menu see 'settings' --> 'show delay'.
For added user control set a delay when using the mouse over feature, From the main menu see 'settings' --> 'show delay'.
tree_sub_sub_indent [Sub Sub Indent]
Set to any integer value greater than 0. This defines the indenting of level 2 or greater sub menus.
Typically margin or padding applied through the standard CSS styles adds indenting for the first level sub menus. This option will apply consistent indenting to all level 2+ sub menus.
Typically margin or padding applied through the standard CSS styles adds indenting for the first level sub menus. This option will apply consistent indenting to all level 2+ sub menus.
tree_hide_focus_box [Hide Focus Box]
Set to true or false. When true the focus box which appears when clicking a link will not be visible.
tree_expand_animation [Expand Animation Type]
Set to 0, 1, 2, 3. 0=none, 1=accelerate, 2=decelerate, 3=normal. Leave this field blank or set to 0 for no animation effect.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
tree_expand_step_size [Expand Animation Step Size]
Set to any integer value greater than 0. This defines how many pixels the animation will jump between frames. The higher the value the faster the animation effect will run.
tree_collapse_animation [Collapse Animation Type]
Set to 0, 1, 2, 3. 0=none, 1=accelerate, 2=decelerate, 3=normal. Leave this field blank or set to 0 for no animation effect.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
The normal animation is a standard slide effect, accelerate and decelerate modify the normal slide.
tree_collapse_step_size [Collapse Animation Step Size]
Set to any integer value greater than 0. This defines how many pixels the animation will jump between frames. The higher the value the faster the animation effect will run.
Add-On: Swipe Subs (Touch Devices - iPad / Android, etc...)
When active this add-on enables swipe activation of sub menus in touch systems such as iPad (iOS) and Android devices. Swipe an item down or right to open its child sub menu, swipe up or left to close the sub.
swipe_enabled [Enabled]
Set to 'true' or 'false'. When true swiping is enabled.
swipe_vertical_frames [Vert. Frames]
Set to any integer value greater than 0. The vertical animation frames to display when the 'touchend' event is triggered. This setting determines how fast (number of frames) the sub animates for vertical based subs after the swipe.
swipe_horizontal_frames [Horz. Frames]
Set to any integer value greater than 0. The horizontal animation frames to display when the 'touchend' event is triggered. This setting determines how fast (number of frames) the sub animates for horizontal based subs after the swipe.
Add-On: Keep Subs In Window
When active this add-on will stop sub menus from falling outside of the browsers visible window area. Sub menus will automatically be moved up or to the left so they are fully visible.
subs_in_window_active [Active]
Set to true or false. When true, large sub menus which can fall outside the browsers visible window area will automatically reposition and stay visible.
Add-On: Persistent State
The persistent state is visible when a menu items link matches the URL location of the document containing the menu. If the item is in a sub menu then
parent's grandparent's, etc. who own the child will also display there persistent state styles.
Persistent states are integral to modern menu design. The persistent items help users locate there current location in the menu relative to the document. For drop down menus you can gain many of the advantages of tree style structures without the real-estate overhead.
Persistent styles are located within the standard CSS style settings. A wide array of custom images, colors, fonts, and more can be applied to persistent items to make them stand out.
Persistent states are integral to modern menu design. The persistent items help users locate there current location in the menu relative to the document. For drop down menus you can gain many of the advantages of tree style structures without the real-estate overhead.
Persistent styles are located within the standard CSS style settings. A wide array of custom images, colors, fonts, and more can be applied to persistent items to make them stand out.
sopen_auto_enabled [Active]
Set to true or false. When true, all persistent state styles will be displayed for items with URL's that match the
URL location of the document containing the menu.
sopen_auto_show_subs [Atuo Open Subs]
Set to true or false. When true any sub menu containing an item with its persistent state showing will by default be visible when the menu loads. This feature works with standard drop down menus and tree structures.
sopen_auto_match_query [Match Query String]
Set to 'none', 'all', or 'partial'. When set to 'all', the persistent state styles will be displayed for items with both a URL and query string (data after the '?' character in the URL) that matches the URL location of the document containing the menu. The 'partial' option will look for a substring match starting at the beginning of the current documents query string.
Add-On: Keyboard Access
This add-on adds an extra level of accessibility to the menu. Users can navigate the structure entirely with the keyboard.
Use the arrow, tab, shift-tab, and enter keys to navigate and activate hyperlinks.
Use the arrow, tab, shift-tab, and enter keys to navigate and activate hyperlinks.
keyboard_access_active [Active]
Set to true or false. When true the menu is further accessible via the keyboard, use the arrow, tab, shift-tab, and enter keys.
To test this add-on you may need to preview or save the menu.
To test this add-on you may need to preview or save the menu.
Add-On: Fix IE - Over PDF / Object
This add-on corrects IE bugs which cause HTML content to hide behind embeded objects such as a PDF document in an IFRAME, or the old IE6 Select Tag Bug.
overselects_active [Active]
Set to true or false. When true sub menus will display on top of embedded PDF documents and some other Objects.
Add-On: Event Listeners
This add-on allows custom JavaScript code to be fired in response to different menu events.
event_listeners_enabled [Active]
Set to true or false. When true, defined event listeners will be active and enabled.
event_listener_mouse_over [Mouse Over]
Set to a string containing the function name to call or JavaScript code to execute when the 'mouseover' event it fired on a menu item.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
event_listener_mouse_out [Mouse Out]
Set to a string containing the function name to call or JavaScript code to execute when the 'mouseout' event it fired on a menu item.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
event_listener_sub_show [Show Sub]
Set to a string containing the function name to call or JavaScript code to execute when the 'showsub' event it fired.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
event_listener_sub_hide [Hide Sub]
Set to a string containing the function name to call or JavaScript code to execute when the 'hidesub' event it fired.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
mouseover selected item [Mouse Over]
Set to a string containing the function name to call or JavaScript code to execute when the 'mouseover' event it fired on a menu item.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
mouseout selected item [Mouse Out]
Set to a string containing the function name to call or JavaScript code to execute when the 'mousout' event it fired on a menu item.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
showsub - selected sub [Show Sub]
Set to a string containing the function name to call or JavaScript code to execute when the 'showsub' event it fired.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
hidesub - selected sub [Hide Sub]
Set to a string containing the function name to call or JavaScript code to execute when the 'hidesub' event it fired.
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
If full JavaScript code is used with this setting it will be executed with eval. Optionally a javascript function name may be called by specifying the function name only. The first argument passed to the function is an event object containing the following properties...
target:element (This is the target menu item which triggered the event.)
type:string (The event type name.)
type:string (The event type name.)
Add-On: Show Subs Onload
Unlike the persistent state which matches item URL's to the document's URL, this add-on allows for any sub menu(s) to be set visible when the menu loads.
showload_active [Active]
Set to true or false. When true the show subs onload addon will be enabled.
showload_auto_close [Auto Close]
Set to true or false. When true sub menus which start visible will automatically hide based upon the mouseover and mouseclick settings for the menu. With a mouse over menu the visible subs will close once the user moves about the page. With onclick menus the visible sub will close once a different menu item is selected.
qm-startopen [Show]
Set to true or false. When true the sub menu container will be visible when the menu loads. Each menu may only have one sub menu with the value applied.
Add-On: Item Images
The item images add-on turns any menu item into an image based item with hover and active state support. This add on is typically used for main menu image based buttons, however images may be added to sub menu items as well.
static image[Static Image]
Specify the location and file name of the image to display. Use relative or fully qualified (http://) paths. The static image is the default visible image.
hover image[Hover Image]
Set to true or false. When true NodeFire will look for an image with the same name as the static image defined for the item, with '_hover' appended to the name. If your static image is called main1.gif, the hover image must be in the same folder and called main1_hover.gif.
The hover image is visible when the mouse is over the menu item, or if no active image is defined, it will also be visible while its child sub menu is visible.
The hover image is visible when the mouse is over the menu item, or if no active image is defined, it will also be visible while its child sub menu is visible.
active image[Active Image]
Set to true or false. When true NodeFire will look for an image with the same name as the static image defined for the item, with '_active' appended to the name. If your static image is called main1.gif, the hover image must be in the same folder and called main1_hover.gif.
The active image will display while the items sub menu is visible. If the item does not have a child sub then only the hover image will appear.
The active image will display while the items sub menu is visible. If the item does not have a child sub then only the hover image will appear.
alternate text[Alternate Text]
Set to any text description, in some browsers this may appear as a tool tip when hovering over the image. The setting is primarily used for accessibility purposes and helps keep your content valid.
Menu Settings
Show Delay
Set to an integer value greater than 0. The show delay is defined in milliseconds (1/1000 of a second).
The show delay helps users control the menu selection by delaying the appearance of subs.
The show delay helps users control the menu selection by delaying the appearance of subs.
Hide Delay
Set to an integer value greater than 0. The hide delay is defined in milliseconds (1/1000 of a second).
The hide delay prevents the sub menus from closing to quickly if a user accidentally moves the mouse off the menu.
The hide delay prevents the sub menus from closing to quickly if a user accidentally moves the mouse off the menu.
Interaction
Set to false, 'all', 'all-always-open', 'hover-always-open', 'click-all', 'lev2', or 'main'...
false - Sub menus expand and collapse based on mouse over events only.
'all' - Sub menus expand and collapse based on mouse click events only, sub menus remain visible until clicking outside of the menu area (except for tree style menus).
'all-always-open' - This is the same as the 'all' option except that the visible sub menu will not close when clicking outside of the menu. Combining this option with the 'Show Subs Onload' addon is great for creating tab based content areas which are always visible.
'hover-always-open' - Same as 'all-always-open' which is click style vs this setting which is hover style.
'lev2' - 2nd level sub menus expand and collapse based on mouse click events. 1st level sub menus expand and collapse when moving the mouse over a main menu item.
'main' - In this mode the menu behaves similar to a menu system within a Windows or Mac application. To activate the menu a main item must be clicked, then the remaining structure may be navigated with mouse over events. The menu will close when clicking in the HTML document outside of the menu area.
During visual design the menu only reacts to click events, to test this setting you must preview the menu.
'all' - Sub menus expand and collapse based on mouse click events only, sub menus remain visible until clicking outside of the menu area (except for tree style menus).
'all-always-open' - This is the same as the 'all' option except that the visible sub menu will not close when clicking outside of the menu. Combining this option with the 'Show Subs Onload' addon is great for creating tab based content areas which are always visible.
'hover-always-open' - Same as 'all-always-open' which is click style vs this setting which is hover style.
'lev2' - 2nd level sub menus expand and collapse based on mouse click events. 1st level sub menus expand and collapse when moving the mouse over a main menu item.
'main' - In this mode the menu behaves similar to a menu system within a Windows or Mac application. To activate the menu a main item must be clicked, then the remaining structure may be navigated with mouse over events. The menu will close when clicking in the HTML document outside of the menu area.
Auto Resize
If true the menu will resize itself when the user resizes the browser window. This only applies to menus with features that auto stretch items to fit container widths.